<template>
  <div class="content">
    <div class="bg"></div>
    <el-row
      align="cen"
      class="baseP w100"
      :gutter="24"
      justify="center"
      type="flex"
    >
      <el-col :lg="10" :md="10" :sm="14" :span="6" :xl="6" :xs="24">
        <div class="white-box">
          <div class="login-title">
            <logo class="pr10" style="width: 40px;height: 40px" />
          </div>
          <div class="con">
            <div class="input-box">
              <el-input
                v-model="username"
                autocomplete="off"
                placeholder="请输入邮箱"
              >
                <template slot="prepend">
                  <div class="el-icon-message icon"></div>
                </template>
              </el-input>
            </div>
            <div class="input-box">
              <el-input
                v-model="password"
                autocomplete="off"
                placeholder="请输入密码"
                type="password"
              >
                <template slot="prepend">
                  <div class="el-icon-lock icon"></div>
                </template>
              </el-input>
            </div>

            <el-button
              class="anniu"
              type="primary"
              @click="nav"
              @keyup.enter="keyDown(e)"
            >
              登录
            </el-button>
          </div>
        </div>
        <el-row class="mt10" :gutter="10" justify="space-between" type="flex">
          <el-link
            href="http://privacy.mistiny.com/multieye"
            target="_blank"
            type="white"
          >
            隐私政策
          </el-link>
          <el-link type="white" @click="forgotPassword">
            忘记密码
          </el-link>
          <el-link
            href="https://help.mistiny.com/multieye"
            target="_blank"
            type="white"
          >
            帮助文档
          </el-link>
        </el-row>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import user from "@/api/user";
import { mapActions } from "vuex";
const Logo = () => import("@/views/login/logo");
export default {
  name: "Login",
  components: { Logo },
  data() {
    return {
      username: "",
      password: "",
      code: "",
      random: ""
    };
  },
  activated() {
    this.random = Math.random();
  },
  mounted() {
    window.addEventListener("keydown", this.keyDown);
    this.random = Math.random();
  },
  destroyed() {
    window.removeEventListener("keydown", this.keyDown, false);
  },
  methods: {
    ...mapActions(["AsyncSetUserInfo"]),
    forgotPassword() {},
    nav() {
      user
        .login({
          email: this.username,
          password: this.password
        })
        .then(res => {
          localStorage.setItem("role", res.data.role);
          const needReport = localStorage.getItem("loginReportSwitch");
          if (needReport) localStorage.setItem("needLoginReport", true);
          localStorage.removeItem("loginReport");
          if (res.data.smart_report)
            localStorage.setItem(
              "loginReport",
              JSON.stringify(res.data.smart_report)
            );
          this.AsyncSetUserInfo(res.data);
          this.$message.success("登陆成功");
          window.location.href = "/";
        })
        .catch(() => {
          this.random = Math.random();
        });
    },
    keyDown(e) {
      if (e.keyCode == 13) {
        this.nav();
      }
    }
  }
};
</script>

<style scoped lang="scss">
::v-deep .el-input-group__append {
  padding: 0;
}
.el-link--white {
  color: white;
}
.content {
  display: flex;
  align-items: center;
  justify-content: center;
}
.bg {
  height: 100vh;
  background: #363636;
  width: 100vw;
}
.baseP {
  position: fixed;
}
.white-box {
  width: 100%;
  background: #ffffff00 !important;
  border-radius: 15px;

  padding-top: 22px;
  padding-bottom: 22px;
  z-index: 99;
  .login-title {
    width: 100%;
    text-align: center;
    font-size: 25px;
    font-weight: bold;
    padding-bottom: 20px;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .con {
    width: 100%;
    margin: 0 auto;
    .input-box {
      margin-bottom: 24px;
      .icon {
        font-size: 25px;
        color: #93a2bb;
      }
    }
    .anniu {
      width: 100%;
    }
  }
}
.sr-img {
  position: fixed;
  bottom: 40px;
  z-index: 99;
}
.logo {
  width: 20%;
}
@media screen and (max-width: 500px) {
  .logo {
    width: 30%;
  }
}
</style>
